//index.js
import * as echarts from '../../lib/ec-canvas/echarts';
const app = getApp()

//添加echarts绘制频率仪表盘函数
function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
    });
    canvas.setChart(chart);

    var option = {
        backgroundColor: '#ffffff',
        tooltip: {
            // formatter: '{a} <br/>{c} {b}'
            formatter: '{c} {a}'
        },
        //初始动画时长
        animationDuration: 40,
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                restore: {
                    show: false
                },
                saveAsImage: {
                    show: false
                }
            }
        },
        series: [{
            name: 'HZ',
            type: 'gauge',
            //最小数值
            min: 0,
            //最大数值
            max: 100,
            //开始角度
            startAngle: 160,
            //结束角度
            endAngle: 20,
            //分割的段数
            splitNumber: 2,
            //占比大小
            radius: '165%',
            //水平和垂直的占比
            center: ['50%', '87%'],
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    // color: [[0.20, '#ff4500'], [0.47, '#1e90ff'],[0.53, 'lime'],[0.8, '#1e90ff'], [1, '#ff4500']],
                    color: [
                        [0.20, '#000'],
                        [0.47, '#000'],
                        [0.53, 'lime'],
                        [0.8, '#000'],
                        [1, '#000']
                    ],
                    width: 40,
                    //透明度
                    opacity: 0,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 0
                }
            },
            //长坐标轴的标注
            axisLabel: { // 坐标轴小标记
                // show:false,
                fontWeight: 'bolder',
                color: '#000',
                fontSize: 20,
                //字体类型（斜体）
                fontStyle: 'italic',
                // shadowColor: '#fff', //默认透明
                shadowBlur: 0,
                formatter: function (v) {
                    switch (v + '') {
                        case '0':
                            return 'L';
                        case '50':
                            return 'OK';
                        case '100':
                            return 'H';
                    }
                }
            },
            //仪表盘中刻度的样式。
            axisTick: { // 坐标轴小标记
                //密度
                splitNumber: 20,
                length: 22, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 0,
                    width: 1.5
                }
            },
            splitLine: { // 分隔线
                //是否显示
                // show:false,
                length: 30, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 3,
                    color: 'lime',
                    //   shadowColor: '#fff', //默认透明
                    shadowBlur: 0
                }
            },
            //仪表盘的指针
            pointer: {
                shadowColor: '#fff', //默认透明
                shadowBlur: 0
            },
            //仪表盘中刻度的样式。
            itemStyle: {
                // fontSize:20
            },
            title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 40,
                    fontStyle: 'italic',
                    color: '#000',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                }
            },
            detail: {
                show: false,
                backgroundColor: 'rgba(30,144,255,0.8)',
                borderWidth: 0.5,
                borderColor: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 1,
                offsetCenter: [0, '25%'], // x, y，单位px
                textStyle: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            //显示的数值
            data: [{
                value: 50,
                name: 'E'
            }],
            //指针中心的白点+
            markPoint: {
                symbol: 'circle',
                symbolSize: 5,
                data: [
                    //跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
                    {
                        x: 'center',
                        y: '87%',
                        itemStyle: {
                            color: '#FFF'
                        }
                    }
                ]
            }
        }]
    };

    //定时执行的函数
    //   setInterval(function (){
    //       option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
    //       chart.setOption(option);
    //   },100);

    chart.setOption(option);
    return chart;
}

Page({
    data: {
        ec: {
            onInit: initChart
        },
        //吉他图片路径
        guitarUrl: "../../images/guitar_strings/strings1.jpg",
    },
    //页面加载时执行（只加载一次）
    onLoad: function () {
        if (!wx.cloud) {
            wx.redirectTo({
                url: '../chooseLib/chooseLib',
            });
            return
        }
        //获取设备信息
        // wx.getSystemInfo({
        //   success (res) {
        //     console.log(res)
        //     console.log(res.model)
        //     console.log(res.pixelRatio)
        //     console.log(res.windowWidth)
        //     console.log(res.windowHeight)
        //     console.log(res.language)
        //     console.log(res.version)
        //     console.log(res.platform)
        //     console.log("------------------")
        //   }
        // })
    },
    //自定义绑定事件，点击时更换图片
    changeStrings: function (event) {
        var str = event.currentTarget.dataset.strings;
        this.setData({
            guitarUrl: "../../images/guitar_strings/strings" + str + ".jpg"
        })

    },
    //切换吉他，尤克里里
    changeGuitar: function () {
        wx.showToast({
            title: '主人正在努力开发中..',
            icon: 'none',
            duration: 1000
          })
    }
})